<template>
  <div class="knowledge-base">
    <div class="header-container">
      <div class="page-header">
        <div class="header-content">
          <h1 class="content-title">知识库</h1>
          <p class="content-description">管理和维护知识库内容</p>
        </div>
        <el-button type="primary" class="add-btn" @click="handleAdd">
          + 新增知识库
        </el-button>
      </div>
    </div>

    <div class="knowledge-grid">
      <div 
        v-for="item in knowledgeList" 
        :key="item.id"
        class="knowledge-card"
        @click="handleCardClick(item)"
      >
        <div class="card-header">
          <div class="icon-wrapper">
            <el-icon :size="24" :color="item.iconColor">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <h3>{{ item.title }}</h3>
        </div>
        
        <div class="card-stats">
          <el-icon :size="16" color="#409EFF">
            <Document />
          </el-icon>
          <span>{{ item.count }} 个场景</span>
        </div>
        
        <p class="card-description">{{ item.description }}</p>
        
        <div class="card-footer">
          <el-tag size="small" class="category-tag">{{ item.category }}</el-tag>
          <span class="update-time">{{ item.updateTime }}</span>
        </div>
      </div>
    </div>

    <!-- 添加知识库弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="选择知识库类型"
      width="600px"
      :before-close="handleClose"
    >
      <div class="knowledge-type-grid">
        <div 
          v-for="type in knowledgeTypes" 
          :key="type.id"
          class="type-card"
          :class="{ selected: selectedType?.id === type.id }"
          @click="selectType(type)"
        >
          <div class="type-icon">
            <el-icon :size="32" :color="type.iconColor">
              <component :is="type.icon" />
            </el-icon>
          </div>
          <h4>{{ type.name }}</h4>
          <p>{{ type.description }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { 
  Document, 
  DataBoard, 
  Reading, 
  QuestionFilled, 
  ChatDotSquare 
} from '@element-plus/icons-vue'

// 路由
const router = useRouter()

// 弹窗控制
const dialogVisible = ref(false)
const selectedType = ref(null)

// 知识库类型定义
const knowledgeTypes = ref([
  {
    id: 1,
    key: 'business',
    name: '业务场景库',
    description: '包含各种业务场景的知识库，涵盖常见的业务流程、操作指南和最佳实践。',
    icon: 'DataBoard',
    iconColor: '#409EFF'
  },
  {
    id: 2,
    key: 'professional',
    name: '专业数据词库',
    description: '专业术语和数据词汇的集合，提供准确的定义和使用说明。',
    icon: 'Reading',
    iconColor: '#67C23A'
  },
  {
    id: 3,
    key: 'qa',
    name: '常见问题QA',
    description: '用户常见问题及其标准答案，帮助快速解决决用户疑问。',
    icon: 'QuestionFilled',
    iconColor: '#E6A23C'
  },
  {
    id: 4,
    key: 'dialogue',
    name: '对话示例库',
    description: '标准对话模板和示例，用于指导客服人员进行有效沟通。',
    icon: 'ChatDotSquare',
    iconColor: '#F56C6C'
  }
])

const knowledgeList = ref([
  {
    id: 1,
    title: '业务场景库',
    category: '业务场景库',
    count: 25,
    description: '包含各种业务场景的知识库，涵盖常见的业务流程、操作指南和最佳实践。',
    updateTime: '2024-01-15 14:30',
    icon: 'DataBoard',
    iconColor: '#409EFF'
  },
  {
    id: 2,
    title: '专业数据词库',
    category: '专业数据词库',
    count: 156,
    description: '专业术语和数据词汇的集合，提供准确的定义和使用说明。',
    updateTime: '2024-01-14 09:45',
    icon: 'Reading',
    iconColor: '#67C23A'
  },
  {
    id: 3,
    title: '常见问题QA',
    category: '常见问题QA',
    count: 89,
    description: '用户常见问题及其标准答案，帮助快速解决决用户疑问。',
    updateTime: '2024-01-13 16:20',
    icon: 'QuestionFilled',
    iconColor: '#E6A23C'
  },
  {
    id: 4,
    title: '对话示例库',
    category: '对话示例',
    count: 42,
    description: '标准对话模板和示例，用于指导客服人员进行有效沟通。',
    updateTime: '2024-01-12 11:15',
    icon: 'ChatDotSquare',
    iconColor: '#F56C6C'
  }
])

const handleAdd = () => {
  dialogVisible.value = true
  selectedType.value = null
}

const handleCardClick = (item) => {
  if (item.title === '业务场景库') {
    // 跳转到业务场景库详情页面
    router.push('/knowledge/business-scenario-detail')
  } else {
    ElMessage.info(`点击了知识库: ${item.title}`)
  }
}

const selectType = (type) => {
  selectedType.value = type
  
  console.log('选择的类型:', type) // 添加调试日志
  
  // 根据类型跳转到不同页面
  if (type.key === 'business') {
    console.log('准备跳转到业务场景库页面') // 添加调试日志
    // 跳转到新建业务场景库页面
    router.push('/knowledge/create-business-scenario')
  } else {
    // 其他类型暂时显示消息
    ElMessage.success(`创建${type.name}成功！`)
  }
  
  dialogVisible.value = false
}

const handleClose = (done) => {
  selectedType.value = null
  done()
}
</script>

<style scoped>
.knowledge-base {
  max-width: 100%;
  width: 100%;
  padding: 0 32px;
}

.header-container {
  background: white;
  border-radius: 8px;
  padding: 24px 32px;
  margin-bottom: 48px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-content {
  flex: 1;
}

.page-header h1 {
  color: #303133;
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

.add-btn {
  background: #409EFF;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.knowledge-card {
  background: white;
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e8e8e8;
  min-height: 220px;
}

.knowledge-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.icon-wrapper {
  margin-right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #f5f7fa;
}

.card-header h3 {
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 2px;
  display: inline-block;
}

.card-stats {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #409EFF;
  font-size: 13px;
}

.card-stats span {
  margin-left: 4px;
  font-weight: 500;
}

.card-description {
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  min-height: 60px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.category-tag {
  background: #f0f2f5;
  color: #606266;
  border: none;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
}

.update-time {
  color: #c0c4cc;
  font-size: 11px;
}

/* 弹窗样式 */
.knowledge-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.type-card {
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.type-card:hover {
  border-color: #409EFF;
  background: #f0f9ff;
}

.type-card.selected {
  border-color: #409EFF;
  background: #f0f9ff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.type-icon {
  margin-bottom: 12px;
}

.type-card h4 {
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.type-card p {
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
</style>